<template>
  <a-modal
    style="width: 50%"
    title="填报预算项目数据"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :maskClosable="false">
    <div style="margin-top: 12px;">
      <a-form :form="form">
        <!-- @select="onSelect" -->
        <a-form-item label="周期类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择周期类型"
            v-decorator="['type', { rules: [{ required: true, message: '请选择周期类型' }] }]">
            <a-select-option :value="item.id" v-for="(item, index) in TypeList" :key="index">{{ item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="上报周期" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-date-picker
            placeholder="请选择上报指标周期"
            value-format="YYYY-MM-DD"
            v-decorator="['dateTime', { rules: [{ required: true, message: '请选择上报指标周期', trigger: 'change' }] }]"
            style="width: 100%;" />
        </a-form-item>
        <dynamic :title="`${PARTONE}`" :arr="projects" ref="dynamicForm" />
      </a-form>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" :visible="visibleBtn" :loading="loadingBtn" @click="handleSubmit">
        保存
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import dynamic from './dynamic'
import { addProjectData } from '@/api/budget'
const PARTONE = 'partOne'

export default {
    components: { dynamic },
    data () {
        return {
            form: this.$form.createForm(this),
            PARTONE,
            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,

            addForm: {
                type: undefined,
                dateTime: '',
                projects: []//	项目数据
            },
            projects: [
                {
                    projectId: '', // 项目Id
                    value: '' // 项目值
                }
            ],
            TypeList: [{ id: 2, name: '月度' }, { id: 3, name: '日度' }],
            //  表单样式
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            }
        }
    },
    methods: {
        // 显示
        open () {
            this.visible = true

            return this
        },
        // 获取行数据和id
        setData (row) {
            this.rowData = row
        },
        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.$emit('close')
        },
        // 提交
        handleSubmit () {
            const { form: { validateFields } } = this
            const _this = this
            this.loadingBtn = true
            this.visibleBtn = true
            validateFields((errors, values) => {
                if (!errors) {
                    const partOneArr = []
                    this.addForm = values
                    values[`${PARTONE}projectId`].forEach((item, index) => {
                        const obj = {
                            projectId: Number(values[`${PARTONE}projectId`][index]),
                            value: values[`${PARTONE}value`][index]
                        }
                        partOneArr.push(obj)
                    })
                    this.addForm.projects = partOneArr
                    addProjectData(this.addForm).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                            _this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                            _this.visible = false
                            _this.$emit('success')
                        } else {
                            _this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        _this.visibleBtn = false
                        _this.loadingBtn = false
                    }).finally(res => {
                        _this.loadingBtn = false
                        _this.visibleBtn = false
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                }
            })
        }
    }
}
</script>
